<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="能量球开关">
          <el-radio-group v-model="form.is_open_nlq">
            <el-radio label="1">开</el-radio>
            <el-radio label="0">关</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否开启排行榜">
          <el-radio-group v-model="form.is_phb_config">
            <el-radio label="1">开</el-radio>
            <el-radio label="0">关</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="每月积分商城购买次数">
          <el-input-number v-model="form.goods_buy_time" :min="1" :max="10" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="排行榜日期开放时间">
          <el-date-picker
            v-model="form.timearr"
            type="datetimerange"
            align="right"
            start-placeholder="排行榜日期开始"
            end-placeholder="排行榜日期结束"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-form ref="otherForm" :model="form" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="流水表格">
              <el-date-picker
                v-model="otherForm.timearr"
                type="datetimerange"
                align="right"
                start-placeholder="日期开始"
                end-placeholder="日期结束"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" @click="downLoadExecl()">立即下载</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="otherForm" :model="otherForm" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户解封">
              <el-input
                placeholder="输入用户手机号"
                v-model="otherForm.statusphone"
                :min="1"
                :max="10"
                label="用户解封"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" @click="handStatus()">立即解封</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="otherForm" :model="otherForm" label-width="120px">
        <el-row>
          <el-form-item label="用户手机号">
            <el-input
              style="width: 300px;"
              placeholder="输入用户手机号"
              v-model="otherForm.phone"
              :min="1"
              :max="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input
              style="width: 300px;"
              placeholder="输入用户手机号"
              v-model="otherForm.name"
              :min="1"
              :max="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户身份证号">
            <el-input
              style="width: 300px;"
              placeholder="输入用户真实身份证"
              v-model="otherForm.idcard"
              :min="1"
              :max="10"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="smPost()">立即实名</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格 -->
  </div>
</template>
<script>
import { setSystemConfig, systemConfig, exportLs } from '@/api/system'
import { parseTime } from '@/utils/index'
import dayjs from 'dayjs'

export default {
  name: 'Banner',
  data() {
    return {
      //   表单
      otherForm: {
        timearr: '',
        statusphone: '',
        phone: '',
        name: '',
        idcard: ''
      },
      form: {
        timearr: '',
        goods_buy_time: '',
        is_open_nlq: '',
        is_phb_config: '',
        phb_end: '',
        phb_start: ''
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      systemConfig().then((res) => {
        this.form = Object.assign(this.form, res.data, {
          timearr: res.data.phb_end
            ? [res.data.phb_start * 1000 || '', res.data.phb_end * 1000 || '']
            : ''
        })
      })
    },
    downLoadExecl() {
      const url = process.env.VUE_APP_BASE_API + '/admin/excel/exportLs'
      const string =
        dayjs(this.otherForm.timearr[0]).format('YYYY-MM-DD') +
        ',' +
        dayjs(this.otherForm.timearr[1]).format('YYYY-MM-DD')
      console.log(url + '?time=' + string)

      window.open(url + '?time=' + string)
    },
    handStatus() {
      const url = process.env.VUE_APP_BASE_API + '/api/handle/handStatus/'
      window.open(url + this.otherForm.statusphone)
    },
    smPost() {
      const url = process.env.VUE_APP_BASE_API + '/api/handle/smPost/'
      const newUrl =
        url +
        this.otherForm.phone +
        '/' +
        this.otherForm.name +
        '/' +
        this.otherForm.idcard
      console.log(newUrl)
      window.open(newUrl)
    },

    // https://ouhun.wm2177.com/api/handle/smPost/手机号/姓名/身份证号
    onSubmit() {
      const { arr } = this.form
      const data = Object.assign({}, this.form, {
        phb_start: parseTime(this.form.timearr[0]),
        phb_end: parseTime(this.form.timearr[1])
      })
      setSystemConfig(data).then((res) => {
        this.$message.success(res.msg)
        this.init()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
}
.search {
  display: flex;
  align-items: center;
}

::v-deep .el-drawer.rtl {
  width: 650px !important;
  overflow: auto;
}
// 上传图片
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>